export const useDragJudge = (
  instance: ReturnType<typeof useTemplateRef<HTMLElement>>,
) => {
  const isInDropZone = ref(false);

  const handleDragEnter = () => {
    isInDropZone.value = true;
  };

  // * 拖拽离开事件 - 检查是否真正离开目标区域
  const handleDragLeave = (e: DragEvent) => {
    // - 检查相关目标是否还在容器内
    const container = (instance.value! as any).$el || instance.value;
    if (container && e.relatedTarget) {
      const isStillInside = container.contains(e.relatedTarget as Node);
      if (!isStillInside) {
        isInDropZone.value = false;
        console.log("handleDragLeave - 真正离开", isInDropZone.value);
      } else {
        console.log("handleDragLeave - 仍在容器内");
      }
    } else {
      // 如果没有 relatedTarget，认为是真正离开了
      isInDropZone.value = false;
      console.log("handleDragLeave - 无相关目标，认为离开", isInDropZone.value);
    }
  };

  return {
    isInDropZone,
    handleDragEnter,
    handleDragLeave,
  };
};
